import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { _HttpClient } from '@delon/theme';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { ApiService } from '@core/services/api';
import { STData } from '@delon/abc';
import { type } from 'os';
import { ACLService } from '@delon/acl';

@Component({
  selector: 'io-records-list',
  templateUrl: './records-list.component.html',
  styles:['>>>.hidcolumn{width:0;}']
})
export class IoRecordsListComponent implements OnInit {
  @ViewChild('st', { static: false }) st: TablePageComponent;
  watchImgFlag:boolean = this.aclService.canAbility("io-records-list/watchImg");//检查用户按钮权限
  selectData: any[];
  loading = false;
  addUserInfo = {
    userAccount: '',
    userPassword: '',
    userName: '',
    roles: [],
    depts: []
  };
  config: SPage = {
    columns: [
      {
        index: 'personName',
        title: '姓名',
        width:150,
        filter: {
          placeholder: '请输入姓名',
          type: 'string'
        }
      },
      {
        index: 'recordPersonUrl1',
        title: '抓拍图片',
        width:150,
        type: ColumnType.img,
        className:'personimage'
      },
      {
        index: 'inoutPos',
        title: '楼宇区域',
        width:500,
        filter: {
          placeholder: '请输入楼宇区域',
          type: 'string'
        }
      },
      {
        index: 'deviceCode',
        title: '设备SN编码',
        width:150,
        filter: {
          placeholder: '请输入设备SN编码',
          type: 'string'
        }
      },
      {
        index: 'deviceDescribe',
        title: '设备描述',
        width:150,
        filter: {
          placeholder: '请输入设备描述',
          type: 'string'
        }
      },
      {
        index: 'recordType',
        title: '通行方式',
        width:120,
        type: ColumnType.tag,
        tag:{
          1:{text:'人脸识别'},
          2:{text:'可视对讲'},
          3:{text:'APP'},
          4:{text:'智能门卡'},
          5:{text:'蓝牙'},
          6:{text:'远程开门'},
          7:{text:'密码开门'}
        },
        filter: {
          placeholder: '开门方式',
          type: 'select',
          items: [
            {label: '人脸识别', value: 1},
            {label: '可视对讲', value: 2},
            {label: 'APP', value: 3},
            {label: '智能门卡', value: 4},
            {label: '蓝牙', value: 5},
            {label: '远程开门',value: 6},
            {label: '密码开门',value: 7}
          ]
        }
      },
      {
        index: 'createTime',
        title: '开门时间',
        width:200,
        type:ColumnType.date
      },
      {
        index:'startDate',
        title:'',
        type:ColumnType.date,
        className:'hidcolumn',
        filter:{
          placeholder:'开始时间',
          type:'date',
          format:'YYYY-MM-DD 00:00:00'
        }
      },
      {
        index:'endDate',
        title:'',
        type:ColumnType.date,
        className:'hidcolumn',
        filter:{
          placeholder:'结束时间',
          type:'date',
          format:'YYYY-MM-DD 23:59:59'
        }
      },
      {
        index: '',
        title: '操作',
        width:100,
        fixed:'right',
        buttons:[
          {
            text:'查看视频',
            click:(_record)=>{
              console.log(_record)
              this.videoWach(_record.recordVideoUrl)
            }
          }
        ]
      },
    ],
    showCheckBox: false,
    defaultParam:{order:'createTime desc'},

    // editBtn:[
    //   {title: '查看大图'}
    // ],
    reqUrl:'/core/record/inout/page'
  }
  constructor(private http: _HttpClient,  private api: ApiService, private modal: NzModalService,private img: ElementRef, private message: NzMessageService,private aclService: ACLService) { }
  
  imageInfo(imageUrl?: string): void {
    
    const modal = this.modal.create({
      nzTitle: '图片信息',
      nzContent: '<img width="100%" src="'+imageUrl+'">',
      nzWidth: 800,
      nzFooter: null
    })
  }
  videoWach(imageUrl?:string):void{
    const modal = this.modal.create({
      nzTitle: '视频信息',
      nzContent: '<video width="100%" src="'+imageUrl+'" controls="controls"></video>',
      nzWidth: 800,
      nzFooter: null
    })
  }
  dataProcess(data:STData[]){
    for(var item of data){
        if(item.deviceDescribe == "null"){
          item.deviceDescribe="";
        }
    }
    return data;
  }
  
  operate(e: any): void {
    if (e.title === '查看大图') {
      this.imageInfo(e.data.recordPersonUrl1);
    }
  }
  ngOnInit() {

  }
  ngAfterViewInit(){
    const self=this
    document.getElementsByTagName('table')[0].addEventListener('click',function(e){
     if(e.target && (<HTMLElement>e.target).nodeName.toLowerCase() == "img"){
       let src=(< HTMLMediaElement>e.target).currentSrc
       self.imageInfo(src)
     }
    })
  }
}
